<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="Style.css">
    <link rel="stylesheet" href="../FontAwesome/fontawesome-free-6.6.0-web/css/all.min.css">
</head>
<body>

            <!--增删查改，还可以添加导航栏

            导航栏内放置：1.跳转首页 2.添加商品 3.减少商品 4.多选 5.全选 6.搜索 7.待支付

            1.增：直接在本页面添加，添加到最后面
            2.删：依照视频中
            3.查：搜索栏，一个div，里面有搜索框和搜索按钮
            4.改：仅改数量，依照视频中

            结算的时候要重新开一个小窗口，里面有结算按钮和结算信息，结算按钮要跳转到结算页面
            结算页面要显示结算信息，包括商品名称，商品价格，商品数量，总价，以及结算按钮
            结算按钮要跳转到结算成功页面，结算成功页面要显示结算成功信息，包括商品名称，商品价格，商品数量，总价，以及结算成功按钮
            结算成功按钮要跳转到首页

            -->

    <!-- 购物车主容器，包含所有购物车元素 -->
    <div class = "container">
        <!-- 购物车头部区域，包含标题和操作按钮 -->
        <div class = "cart-header">
            <h1>
                <i class = "fa fa-cart-shopping">我的购物车</i>
            </h1>
        </div>

        <!-- 全部商品标题 -->
        <div class="cart-title">全部商品</div>

        <!-- 购物车操作按钮区域 -->
        <div class = "cart-actions">
            <div class = "select-all">
                <input type = "checkbox" id = "select-all-checkbox">
                <label for = "select-all-checkbox">全选</label>
            </div>
            <div class = "search">
                <button id="search-btn"><i class = "fa fa-search">搜索</i></button><input type = "text" class = "search-input" placeholder = "输入商品名称..." id = "search-input">
            </div>
            <div class = "add-product">
                <button id = "add-product-btn"><i class = "fas fa-cart-plus"></i>添加商品</button>
            </div>
            <div class = "delete-batches">
                <button id = "batch-delete-btn">
                    <span class = "batch-delete-text">批量删除</span>
                    <i class = "fas fa-trash-can batch-delete-icon" style = "display: none;"></i>
                </button>
            </div>
        </div>

        <!-- 商品列表区域，用于动态加载购物车商品 -->
        <div id = "product-list" class = "flex-container">

        </div>

        <!-- 购物车底部区域，包含结算信息 -->
        <div class = "cart-footer">
            <!-- 购物车汇总信息区域 -->
            <div class = "cart-summary">
                <!-- 已选商品数量显示区域 -->
                <div class = "cart-select-info">
                    <span id = selected-count>已选择0件商品</span>
                </div>
                <div class="total-price-display" id="total-price">总价:￥0.00</div>
                <div class="checkout-container">
                    <button class="checkout"><i class="fas fa-credit-card"></i>结算</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 结算弹窗 -->
    <div id="checkout-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>结算确认</h3>
            </div>
            <div class="modal-body" id="checkout-content">
                <!-- 动态内容将在这里显示 -->
            </div>
            <div class="modal-footer">
                <button id="confirm-checkout" class="btn-confirm">确定支付</button>
                <button id="cancel-checkout" class="btn-cancel">取消</button>
            </div>
        </div>
    </div>

    <script src = "JavaScript.js"></script>
</body>
</html>